const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
  ],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名：优点简写路径，缺点没有路径提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略路径的后缀名，默认是.js, .json
    // 注意，文件名不要取重名，否则会取js文件
    extensions: ['.js', '.json', '.css'],
    // 告诉webpack解析模块时是去找哪个目录， 默认是当前目录的node_module, 一直向外层找直到找到
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  },
  devServer: {
    //路径（服务的文件夹）
    contentBase: resolve(__dirname, 'build'),
    // 监视contentBase目录下的所有文件，一旦文件变化就会reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩，代码更小
    compress: true,
    //是否实时监听
    inline: true,
    // 端口号
    port: 5000,
    // 自动打开本地默认浏览器
    open: true,
    host: '域名',
    // 开启HRM功能
    hot: true,
    // 不显示启动服务器的日志信息
    clientLogLevel: 'none',
    // 除了基本的启动信息外，其它内容都不显示
    quiet: true,
    // 如果出现错误，不要全屏提示
    overlay: false,
    // 服务器代理，解决开发环境下的跨域问题, 服务器和服务器之间是没有跨域问题的
    proxy: {
      // 一旦devServer(5000)接受到 /api/xxx的请求，就会把请求转发到另外一个服务器
      '/api': {
        target: 'http: //localhost: 3000',
        // 发送请求时，路径重写，将 /api/xxx ---> /xxx
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
